<template>
  <div id="trade"></div>
</template>

<script>
import { findTradeDict } from '../../../api/index';
import { selecttrades } from '../../../api/dataCenter';
export default {
  name: 'trade',
  data () {
    return {
      name: [],
      data: [{ name: '公共管理/社会保障', value: 7410 }, { name: '金融业', value: 31837 }, { name: '文化/体育/娱乐', value: 1346 }, { name: '互联网/IT/电子/通信', value: 3867 }, { name: '卫生及社会工作', value: 650 }, { name: '建筑业', value: 2645 }, { name: '房地产', value: 2769 }, { name: '交通运输/仓储/物流', value: 835 }, { name: '专业服务', value: 1439 }, { name: '批发/零售/贸易', value: 5151 }, { name: '能源/环保/矿产', value: 665 }, { name: '生活服务', value: 3589 }, { name: '教育培训/科研', value: 3063 }, { name: '制造业', value: 10225 }, { name: '农林牧渔', value: 588 }]
    };
  },
  methods: {
    drawLine () {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById('trade'));
      // 绘制图表
      myChart.setOption({
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: 'shadow'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'value',
          axisLabel: {
            textStyle: {
              color: '#fff'
            }
          }
        },
        yAxis: {
          type: 'category',
          data: this.name,
          axisLabel: {
            textStyle: {
              color: '#fff'
            }
          }
        },
        series: [
          {
            type: 'bar',
            stack: '总量',
            itemStyle: {
              color: 'blue'
            },
            label: {
              show: true,
              position: 'right',
              textStyle: {
                color: '#fff'
              }
            },
            data: this.data
          }
        ]
      });
    }
  },
  mounted () {
    // let obj = {};
    // findTradeDict()
    //   .then(data => {
    //     if (data.success) {
    //       console.log(data);
    //       data.data.forEach(item => {
    //         obj[item.name] = item.code;
    //       });
    //       console.log(obj);
    //       return selecttrades();
    //     }
    //   })
    //   .then(data => {
    //     console.log(data);
    //     if (data.success) {
    //       this.data = Object.keys(obj).map(val => {
    //         return data.data.find(item => {
    //           return obj[val] === item.trade;
    //         }).tradeCount;
    //       });
    //       this.name = Object.keys(obj);
    //       console.log(this.data);
    //     }
    //   });
    this.name = this.data.map(i => {
      return i.name
    })
    this.drawLine();
  }
};
</script>

<style scoped>
#trade {
    width: 500px;
    height: 504px;
    border: 1px dashed rgb(54, 164, 180, 0.6);
    border-radius: 5px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
    background: url('../../../assets/img/trade.png') no-repeat;
    background-size: cover;
    color: rgba(255, 255, 255, 1);
}
</style>